<script setup lang="ts">
import { data } from '@/assets/data/user.json'

const router = useRouter()

const Data = ref(data)

const msgList = computed(() => {
  return Data.value.filter((item) => !item.top).sort((a, b) => a.id - b.id)
})

const topList = computed(() => {
  return Data.value.filter((item) => item.top).sort((a, b) => a.id - b.id)
})

// 置顶
function top(id: number) {
  const index = Data.value.findIndex((item) => item.id === id)
  Data.value[index].top = true
}

// 移除置顶
function remove(id: number) {
  const index = Data.value.findIndex((item) => item.id === id)
  Data.value[index].top = false
}

function del(id: number) {
  showConfirmDialog({
    message: '确定要删除这条消息吗？',
  })
    .then(() => {
      // on confirm
      Data.value = Data.value.filter((item) => item.id !== id)
    })
    .catch(() => {
      // on cancel
    })
}

function chat(title: string|number) {
  router.push({ name: 'chat', params: { title } })
}
</script>
<template>
  <section class="page-container">
    <van-cell-group title="置顶" v-if="topList.length">
      <van-swipe-cell v-for="item in topList" :key="item.id">
        <van-cell size="large" @click="chat(item.id)">
          <template #title>
            <span style="font-size: 18px">{{ item.title }}</span>
          </template>
          <template #icon>
            <van-image
              width="48px"
              height="48px"
              radius="10%"
              fit="fill"
              style="margin-right: 16px"
              :src="item.icon"
            />
          </template>
          <template #label>
            <van-text-ellipsis :content="item.label" />
          </template>
          <template #right-icon>
            <span style="color: var(--van-gray-6)">{{ item.time }}</span>
          </template>
        </van-cell>
        <template #right>
          <van-button
            square
            type="danger"
            text="移除"
            style="height: 100%"
            @click="remove(item.id)"
          />
        </template>
      </van-swipe-cell>
    </van-cell-group>

    <van-cell-group title="最新消息">
      <van-swipe-cell v-for="item in msgList" :key="item.id">
        <van-cell size="large" @click="chat(item.title)">
          <template #title>
            <span style="font-size: 18px">{{ item.title }}</span>
          </template>
          <template #icon>
            <van-image
              width="48px"
              height="48px"
              radius="10%"
              fit="cover"
              style="margin-right: 16px"
              :src="item.icon"
            />
          </template>
          <template #label>
            <van-text-ellipsis :content="item.label" />
          </template>
          <template #right-icon>
            <span style="color: var(--van-gray-6)">{{ item.time }}</span>
          </template>
        </van-cell>
        <template #right>
          <van-button square type="danger" text="删除" style="height: 100%" @click="del(item.id)" />
        </template>
        <template #left>
          <van-button
            square
            type="primary"
            text="置顶"
            style="height: 100%"
            @click="top(item.id)"
          />
        </template>
      </van-swipe-cell>
    </van-cell-group>
  </section>
</template>

<style lang="scss" scoped>
.van-cell::after {
  content: '';
  display: block;
  margin-left: 64px;
  //border-bottom: 1px solid var(--van-gray-4);
}
</style>
